<template>
	<!-- 1.轮播图 -->
	<view class="">
		<text>1.轮播图</text>
		<!-- 属性: -->
		<!-- indicator-dots表示是否显示指示点 -->
		<!-- indicator-color表示默认未选中颜色 -->
		<!-- indicator-active-color表示选中颜色 -->
		<!-- circular表示是否首尾相连 -->
		<!-- autoplay表示自动切换 -->
		<!-- interval表示自动切换的时间是3000毫秒 -->
		<!-- vertical表示纵向,默认是横向 -->

		<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="blue" circular
			:autoplay="true" :interval="3000" vertical>
			<swiper-item>
				111
			</swiper-item>
			<swiper-item>
				222
			</swiper-item>
			<swiper-item>
				333
			</swiper-item>
			<swiper-item>
				444
			</swiper-item>
		</swiper>
	</view>
	<!-- 2.图片 -->
	<view class="">
		<text>2.图片组件</text>
		<br>
		<!-- 图片的格式可以是png,webp等 -->
		<!-- model属性用于图片的裁剪和显示,如需使用请查看官方文档 -->
		<image src="../../static/logo.png" mode="" class="pic1"></image>
	</view>
	<!-- 3.页面跳转 -->
	<view class="three">
		<text>3.页面跳转</text>
		<br />
		<view class="">
			<!-- url是必要属性,表示跳转到达哪个页面,其他属性请查看官网,跳转路由不能是tabBar,否则需要修改open-type -->
			<navigator url="/pages/demo1/demo1" class="navi" open-type="reLaunch">文字跳转到demo1</navigator>
			<navigator url="/pages/demo1/demo1" open-type="reLaunch">
				图片跳转到demo1:
				<image src="../../static/logo.png" mode="" class="pic2"></image>
			</navigator>
		</view>

	</view>
	<!-- 4.表单组件 -->
	<view class="">
		<view>4.表单组件</view>
		<view class="">
			按钮
			<!-- size是大小，default或者mini -->
			<!-- type是类型 -->
			<!-- plain是一个镂空效果，看个人喜欢 -->
			<!-- disabled可以让按钮禁用 -->
			<!-- loading表示正在等待，在uniapp中只是效果，没有功能 -->
			<button size="default" type="primary">按钮</button>
		</view>
		<view class="">
			input输入框
			<!-- type可以设置不同类型-->
			<!-- placeholder表示提示内容 -->
			<!-- placeholder-style可以设置样式 -->
			<!-- password可以直接变为不可见 -->
			<!-- disabled表示禁用 -->
			<!-- maxlength限制最大长度 -->
			<!-- confirm-type,当type为text时候可用。弹出软键盘右小角按钮的文字，send--发送，search--搜索，next--下一个，go--前往，done--完成 -->
			<!-- 事件 -->
			<!-- @blur失去焦点 -->
			<!-- @confirm当敲击回车或者确定按钮 -->
			<!-- @input当用户键盘输入的时候出发事件 -->
			<input type="text" placeholder="请输入搜索内容" placeholder-style="color:red" maxlength="10" confirm-type="done" />
			<input type="number" placeholder="请输入整型数字,均支持但是注意负数和小数需要校验" />
			<input type="idcard" placeholder="请输入身份证,仅支持微信/支付宝/百度/QQ小程序/快手小程序和京东小程序" />
			<input type="digit" placeholder="请输入带小数点的数字" />
			<input type="tel" placeholder="请输入电话" />
			<input type="safe-password" placeholder="请输入安全密码,仅微信小程序支持" />
			<input type="nickname" placeholder="请输入昵称,仅微信小程序支持" />

		</view>
		<view class="">
			复选框
			<checkbox></checkbox>

		</view>


	</view>
	<!-- 5.使用ref定义响应式变量 -->
	<view class="">
		5.使用ref定义响应式变量
		<br />
		{{num1}}
		<br />
		{{num2}}
		<br />
		{{obj}}
		<br />
	</view>
	<!-- 6.激活样式 -->
	<view class="six">
		6.激活样式
		<button class="box" :class=" isActive?'active' : '' " @click="isActive = !isActive">
			激活样式
		</button>

	</view>
	<!-- 7.内联样式 -->
	<view class="">
		7.内联样式
		<view class="" :style="{width:'100%',height:'60px',backgroundColor:'pink',fontSize:'26px'}">
			内联样式
		</view>
	</view>
	<!-- 8.switch组件 -->
	<view class="">
		8.switch组件
		<br />
		<button type="primary" :loading="onloading" class="button8" :style="{backgroundColor:randomColor}">普通按钮</button>
		<!-- @change事件，用于监听开关得改变,checked表示默认开启 -->
		<switch @change="switchChange" />

	</view>
	<!-- 9.v-for列表渲染 -->
	<view class="nine">
		9.v-for列表渲染
		<view class="box" v-for="(item,index) in 3">
			v-for列表渲染--{{index}}
		</view>
		<!-- 注意key是必要属性，并且不能重复，也即就是唯一的属性，注意使用index的方式是完全不推荐的，一般推荐使用id -->
		<view v-for="(item,index) in vForArr" :key="index">
			姓名：{{item.name}},年龄：{{item.age}}
		</view>
		<ul>
			<!-- 使用template的好处是不会渲染出额外的节点 -->
			<!-- 注意v-if和v-for不要同时出现 -->
			<template v-for="item in vForArr" :key="item.id">
				<li>{{item.name}},{{item.age}}</li>
			</template>
		</ul>

	</view>
	<!-- 10.input事件 -->
	<view class="ten">
		10.input事件
		<!-- @input可以使用v-model进行等价替换，并且v-model是双向绑定 -->
		<!-- 	<input type="text" :value="inputvalue" @focus="onFocus" @blur="onBlur"
			@input="event=>inputvalue = event.detail.value" /> -->
		<input type="text" v-model="inputvalue" @focus="onFocus" @blur="onBlur" @confirm="onConfirm" />
		<image src="../../static/chicken.gif" class="pic" :class="activeChicken ?'active':''">
		</image>
		<view class="">
			input预览：{{inputvalue}}
		</view>

	</view>
	<!-- 11.热梗指南demo -->
	<view class="">
		<navigator url="/pages/demo2/demo2">11.热梗指南demo</navigator>
	</view>
	<!-- 12.购物车案例 -->
	<view class="twelve">
		12.购物车案例
		<checkbox-group @change="itemChange">
			<view class="item" v-for="(item,index) in goods" :key="item.id">
				<checkbox :value="item.id" :checked="item.checked" />
				<text class="title">{{item.name}}</text>
				<text class="price">{{item.price}}元</text>
				<text class="del" @click="remove(index)">删除</text>
			</view>
		</checkbox-group>
		<view class="card">
			<view class="text">
				选中{{selectGroup.length}}个产品，总价：{{totalPrice}}元
			</view>

		</view>

	</view>

	<!-- 13.watch监听 -->
	<view class="thirteen">
		13.watch监听
		<input type="text" v-model="person" />
		{{person}}
		<input type="text" v-model="firstName" placeholder="请输入姓" />
		<input type="text" v-model="secondName" placeholder="请输入名" />
		您的姓名：{{fullName}}

	</view>
	<!-- 14.组件 -->
	<view class="">
		14.组件
		<!-- 第一种组件名称写法 -->
		<UserInfo username='咸虾米' avatar='../../static/logo.png'></UserInfo>
		<UserInfo avatar='../../static/logo.png'></UserInfo>
		<UserInfo :username='title' avatar='../../static/logo.png'></UserInfo>
		<!-- 第二种组件名称写法 -->
		<xxm-header></xxm-header>
	</view>
	<!-- 15.layout布局 -->
	<view class="">
		<navigator url="/pages/layout/layout">15.layout布局,slot插槽的使用</navigator>
	</view>

	<!-- 16.子传父通信 -->
	<view class="">
		<navigator url="/pages/demo3/demo3">16.子传父通信 </navigator>

	</view>
	<!-- 17.生命周期 -->
	<view class="">
		<navigator url="/pages/demo4/demo4">17.生命周期</navigator>
	</view>

	<!-- 18.子组件给父组件传值的另一种方式defineExpose(vue3 setup语法) -->
	<view class="">
		<navigator url="/pages/demo5/demo5?name=王五&age=20">18.子组件给父组件传值的另一种方式defineExpose(vue3 setup语法)&生命周期函数
		</navigator>

	</view>
	<!-- 19.回到顶部 -->
	<view class="">
		<!-- 19.回到顶部 -->
		<view class="fixed" v-if='fixed'>
			19.回到顶部
		</view>

	</view>
	<!-- 20.交互反馈 -->
	<view class="">
		20.交互反馈
		<button @click="successToast">成功提示</button>
		<button @click="displayToast">显示</button>
		<button @click="turnOffToast">关闭</button>
		<button @click="inLoading">加载中...</button>
		<button @click="displayModel">显示弹窗</button>
		<button @click="bottomToast">底部弹窗</button>

	</view>
	<!-- 21.使用js进行跳转 -->
	<view class="">
		21.使用js进行跳转
		<button @click="navigat">跳转按钮</button>

	</view>
	<!-- 22.本地缓存 -->
	<view class="">
		22.本地缓存
		<button @click="setCache">开启缓存</button>
		<button @click="readCache">读取缓存:arrs{{cacheArrs}}</button>

	</view>
	<!-- 23.网络请求 -->
	<view class="">
		23.网络请求
		<button @click="sendRequest">发送请求</button>
		内容:{{content}}


	</view>
	<!-- 24.网络请求案例 -->
	<view class="">
		24.网络请求案例--渲染到页面上
		<navigator url="/pages/requestDemo/requestDemo">

			<button>点击跳转</button>
		</navigator>


	</view>
	<!-- 25.咸虾米壁纸项目 -->
	<view class="">
		25.咸虾米壁纸项目
		<navigator url="/pages/project/project" open-type="reLaunch">
			<button>点击跳转--project--index</button>
		</navigator>


	</view>




</template>

<script setup>
	// 5.组合式API使用ref定义响应式变量，除此之外还有很多组合式API的写法，但是我们不使用
	import {
		ref
	} from 'vue'
	let num1 = 1;
	let num2 = ref(10)
	// 设置一个定时器 
	setInterval(() => {
		num2.value++
		// console.log(num2.value)
		if (num2.value === 100) {
			num2.value = 10
		}
	}, 1000)
	let test = ref('咸虾米')
	let arr = ref([1, 2, 3, 4])
	let obj = ref({
		name: '王五',
		age: 18
	})
	// 注意下面对象的写法
	obj.value.name = '李四'
</script>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isActive: false,
				onloading: false,
				randomColor: 'blue',
				vForArr: [{
					id: 0,
					name: 'Jojo',
					age: 27
				}, {
					id: 1,
					name: 'ikun',
					age: 22
				}],
				inputvalue: '123',
				activeChicken: true,
				// 注意checkbox中的id需要是字符串才不会报错
				goods: [{
					id: '0',
					name: '红米K80 pro',
					price: 4799,
					checked: false
				}, {
					id: '1',
					name: 'realme neo7',
					price: 2099,
					checked: false
				}],
				selectGroup: [],
				person: '',
				firstName: '',
				secondName: '',
				fullName: '',
				fixed: false,
				cacheArrs: [],
				content: ''
			}
		},
		onLoad() {
			// 开启文字标题加载
			uni.showNavigationBarLoading()
			// 开启下拉刷新
			uni.startPullDownRefresh()
			setTimeout(() => {

				// 设置动态标题
				uni.setNavigationBarTitle({
					title: 'uni-study-动态标题'
				})
				// 设置标题颜色
				uni.setNavigationBarColor({
					// 仅仅支持#ffffff和#000000
					frontColor: '#000000',
					// 仅仅支持十六进制颜色
					backgroundColor: '#007aff'
				})
				// 关闭文字标题加载
				uni.hideNavigationBarLoading()
				// 关闭下拉刷新
				uni.stopPullDownRefresh()



			}, 2000)




		},
		methods: {
			switchChange(event) {
				let color = '#' + String(Math.random()).substring(3, 9)
				this.randomColor = color
				// console.log(event.detail.value)
				this.onloading = event.detail.value
			},
			onFocus(e) {
				this.activeChicken = false

			},
			onBlur(e) {
				this.activeChicken = true
			},
			onInput(e) {
				// console.log(e)
				this.inputvalue = e.detail.value
			},
			onConfirm(e) {
				// 点击确定或者回车的时候触发的事件
				// console.log(e)
			},
			remove(index) {
				console.log(index)
			},
			itemChange(e) {
				// console.log(e.detail.value)
				this.selectGroup = e.detail.value
				this.goods.forEach(item => {
					item.checked = this.selectGroup.includes(item.id)
				})

			},
			successToast() {
				uni.showToast({
					// 主题文字
					title: '成功',
					// 成功失败或者为none,fail
					icon: 'success',
					// 注意这里需要使用相对路劲,如果不写就会使用默认的
					image: '../../static/logo.png',
					// 在弹窗期间不允许进行操作,默认为false
					mask: true,
					// 只能在APP中生效
					position: 'center',
					// 持续时间,默认1500毫秒
					duration: 1500,
					// 三个回调函数,需要时可以调用
					success() {

					},
					fail() {

					},
					complete() {

					}
				})
			},
			displayToast() {
				uni.showToast({
					title: '加载中',
					duration: 3000
				})
			},
			turnOffToast() {
				uni.hideToast()
			},
			inLoading() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 3000)

			},
			displayModel() {
				uni.showModal({
					// 标题
					title: '提示的标题',
					// 详细描述
					// content: '详情',
					// 是否关闭取消选项
					showCancel: true,
					// 取消文字
					cancelText: 'NO',
					// 取消颜色,16进制
					cancelColor: '#999',
					// 确认颜色
					confirmColor: 'green',
					// 编辑框
					editable: true,
					// 编辑框提示文字,注意不能和content使用
					placeholderText: '提示文字',
					success: res => {
						// confirm:true,cancel:false
						if (res.confirm) {
							uni.showToast({
								title: '删除成功'
							})
						}
					}
				})
			},
			bottomToast() {
				let arrs = ['高中', '大专', '研究生']
				uni.showActionSheet({
					// 提示词,非必填
					title: '请选择您的学历',
					// 必填选项
					itemList: arrs,
					// 按钮的文字颜色
					itemColor: '#fc3',
					success: res => {
						// tapIndex:0开始
						console.log(res)
						console.log(arrs[res.tapIndex])
					}
				})
			},
			navigat() {
				// uni.navigateTo({
				// 	url: '/pages/demo1/demo1',
				// 	// fail can not navigateTo a tabbar page'
				// })
				uni.reLaunch({
					url: '/pages/demo1/demo1'
				})
				// 返回上一页
				// uni.navigateBack()


			},
			setCache() {
				// 这是同步防止缓存的方法,如果key值已经存在就会直接替换
				uni.setStorageSync('storage_key', 'hello_world')
				uni.setStorageSync('arrs', [1, 2, 3])
			},
			readCache() {
				// 同步读取方法
				this.cacheArrs = uni.getStorageSync('arrs')
				// 读取所有的缓存数据
				let res = uni.getStorageInfoSync()
				console.log(res)
				// 删除指定key的缓存数据
				uni.removeStorageSync('storage_key')
				// 删除所有缓存
				// uni.clearStorageSync()

			},
			async sendRequest() {
				// 这是一个异步的方法
				// uni.request({
				// 	url: 'https://jsonplaceholder.typicode.com/todos/1',
				// 	success: res => {
				// 		console.log(res.data.title)
				// 		this.content = res.data.title
				// 	},
				// 	fail: res => {
				// 		console.log(res)
				// 	}
				// })
				// 同步方法
				// uni.request({
				// 	url: 'https://jsonplaceholder.typicode.com/todos/1'
				// }).then(res => {
				// 	this.content = res.data.title
				// })
				// 异步同步化
				let res = await uni.request({
					url: 'https://jsonplaceholder.typicode.com/todos/1'
				})
				this.content = res.data.title

				// uni.request的参数
				uni.request({
					// 请求路径
					url: 'https://jsonplaceholder.typicode.com/todos/1',
					// 在这里进行数据传参,如果是get请求等同于?
					data: {
						id: 5
					},
					// 请求方式
					method: 'GET',
					// 头信息
					header: {
						token: 'thisisatoken',
						'custom-header': 'hello'
					},
					dataType: 'json',
					// 单位毫秒
					timeout: 5000,
					success: res => {

					},
					fail: res => {

					},
					complete() {
						// 无论成功失败都会执行,一般可以用来取消loading
					}
				})


			}

		},
		computed: {
			totalPrice: function() {
				// .reduce是链式调用的加法,0表示从零开始
				return this.goods.filter(item => item.checked).reduce((prev, curr) => prev + curr.price, 0)
			}

		},
		watch: {
			// watch默认监听是浅层监听,对于对象无法监听，并且不能使用箭头函数直接去写
			person: {
				handler: function(newValue, oldValue) {
					// console.log(newValue)
					// console.log(oldValue)
				},
				// 开启deep才可以监听到对象,默认是关闭的
				deep: true
			},
			firstName: {
				handler: function(newValue, oldValue) {
					// console.log(newFirestName)
					this.fullName = newValue + this.secondName
				}
			},
			secondName: {
				handler: function(newValue, oldValue) {
					this.fullName = this.firstName + newValue
				}
			}



		},
		onPageScroll(e) {
			// if (e.scrollTop > 200) {
			// 	this.fixed = true
			// } else {
			// 	this.fixed = false
			// }
			this.fixed = e.scrollTop > 200

		}
	}
</script>
<style lang="scss" scoped>
	// 0.引入css,App.vue里面可以设置通用样式,注意预编译处理器uni.scss修改之后需要重启才能起作用
	// 也可以在uni.scss中使用@import进行引入,写法是一样的
	@import '@/common/css/style.css';

	// 1.轮播图
	swiper {
		width: 100vw;
		height: 200px;
		border: 1px solid green;

		swiper-item {
			width: 100%;
			height: 100%;
			background-color: pink;

		}

		// 表示第2的倍数则变成橙色背景色
		swiper-item:nth-child(2n) {
			background-color: orange !important;
		}
	}

	// 2.图片
	.pic1 {
		width: 100px;
		height: 100px;
	}

	// 3.页面跳转
	.three {
		.navi {
			background-color: coral;
		}

		.pic2 {
			height: 100px;
		}
	}

	// 6.激活样式
	.six {
		.box {
			font-size: 21px;
		}

		.active {
			background-color: green;
		}
	}

	// 8.switch组件
	.button8 {
		// background-color: red;
	}

	// 10.input事件
	.ten {
		// padding: 0 20px;
		// margin-top: 40px;
		position: relative;

		input {
			border: 1px solid #ccc;
			height: 40px;
			position: relative;
			z-index: 2;
		}

		.pic {
			width: 24px;
			height: 24px;
			z-index: 1;
			position: absolute;
			top: 0;
			// 让这个图像在正中间
			left: calc(50% - 12px);
			transition: top 0.3s;

		}

		.pic.active {
			// top: -24px;
			display: none;
		}
	}

	// 12.购物车案例
	.twelve {}

	// 19.回到顶部
	.fixed {
		position: fixed;
		right: 0px;
		bottom: 0px;
		width: 100px;
		height: 100px;
		background-color: orange;
	}
</style>